<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<div class="col-md-8 col-sm-10 ">
            <!-- 帖子内容 -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="media">
                        <div class="media-left">
                            <a href="#">
                                <img class="media-object" src="${ctx}/img/normal.png" alt="...">
                            </a>

                        </div>
                        <div class="media-body">
                            <h5 class="media-heading help-block">
                                <strong>${topic.title }</strong>
                            </h5>
                            <c:if test="${not empty topic.labels}">
                                <c:forEach items="${topic.labels}" var="label">
                                    <c:if test="${label.id == 1}">
                                        <small class="label  label-primary">顶</small>
                                    </c:if>
                                    <c:if test="${label.id == 2}">
                                        <small class="label  label-danger">精</small>
                                    </c:if>
                                    <c:if test="${label.id == 3}">
                                        <small class="label  label-default">热</small>
                                    </c:if>
                                </c:forEach>
                            </c:if>
                                <!-- <small class="label  label-primary">置顶</small>
                                <small class="label  label-danger">精华</small>
                                <small class="label  label-default">锁定</small> -->
                                <p  class="help-block">
                                	<a href="${ctx }/user/info?userid=${topic.uid}">
                                		<u>${topic.username }</u>
                                	</a>  - ${topic.area_name} 发表于<code>${topic.publish_date }</code>
                                	最后回复:<code>goulin</code> 
                                	回复数:<code >12</code>
                                	
                                </p>
                        </div>
                    </div>
                </div>

                <ul class="list-group">

                    <li class="list-group-item">${topic.content }
                    	<!-- 关键字标签 -->
                        <!-- <div class="help-block">
		                    <label class="label label-default">HTTP</label>
		                    <label class="label label-default">安全</label>
		                    <label class="label label-default">交易</label>
		                    <label class="label label-default">支付</label>
		                </div> -->
                    </li>
                    <li class="list-group-item text-right">
                    	<div class="btn-group btn-group-sm">
                    		<a class="btn btn-info ">
                    			<span class="glyphicon glyphicon-heart"></span> <span class="hidden-xs hidden-sm">收藏</span>
                    		</a>
                    		<a class="btn btn-info">
                    			<span class="glyphicon glyphicon-comment"></span> <span class="hidden-xs hidden-sm">回复</span>
                    		</a>
                    		<a class="btn btn-danger">
                    			<span class="glyphicon glyphicon-share"></span> <span class="hidden-xs hidden-sm">分享</span>
                    		</a>
                    		<a class="btn btn-primary">
                    			<span class="glyphicon glyphicon-eye-open"></span> <span class="hidden-xs hidden-sm">关注</span>
                    		</a>
                    		<a class="btn btn-success">
                    			<span class="glyphicon glyphicon-thumbs-up"></span> <span class="hidden-xs hidden-sm">点赞</span>
                    		</a>
                    		<a class="btn btn-warning">
                    			<span class="glyphicon glyphicon-thumbs-down"></span> <span class="hidden-xs hidden-sm">反对</span>
                    		</a>
                    	</div>
                    </li>
                </ul>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading">
                    	跟帖回复 
                    <a href="#" class="btn btn-link btn-sm"><span class="glyphicon glyphicon-arrow-down small"></span> 正</a>
                    <a href="#" class="btn btn-link btn-sm"><span class="glyphicon glyphicon-arrow-up small"></span> 反</a>
                    <a href="#" class="btn btn-link btn-sm"><span class="glyphicon glyphicon-eye-open small"></span> 楼主</a>
                </div>

                <div class="panel-body">
                    <ul class="list-group">
                        <c:if test="${empty replys }">
                            <div class="col-md-12 text-center"><b>竟然没有一个回复! 你要不要消灭零回复?</b></div>
                            <div class="clearfix"></div>
                        </c:if>
                        <c:if test="${not empty replys }">
                            <c:forEach items="${replys.list }" var="reply" varStatus="index">
                                <li class="list-group-item">
                                    <div class="media">
                                        <div class="media-left">
                                            <a href="#">
                                                <img class="media-object" src="${ctx}${reply.head_img_address}" alt="...">
                                            </a>

                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading">
                                                    ${reply.content }

                                            </h5>
                                            <p>
                                                    ${reply.username } 发表于:<code>${reply.reply_time}</code>
                                            </p>
                                            <p>
                                                <a class="btn btn-success btn-xs" ><span class="glyphicon glyphicon-thumbs-up"></span> 0</a>
                                                <a class="btn btn-warning btn-xs" ><span class="glyphicon glyphicon-thumbs-down"></span> 1</a>
                                                <a class="btn btn-info btn-xs" ><span class="glyphicon glyphicon-comment"></span> 1</a>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="clearfix"></div>
                                </li>
                            </c:forEach>
                        </c:if>
                    </ul>
                </div>

                <div class="panel-footer">
                    <!-- 分页 ,最优是6个 -->
                    <c:if test="${not empty replys}">
                    <div class="text-center" style="margin-top: -12px;">
                        <ul class="pagination" id="pageList">
                            <li class=""><a href="javascript:void(0);" aria-label="Previous" onclick="previous(this)">«</a></li>
                            <c:forEach begin="1" end="${replys.totalPage }" varStatus="state">
                                <li class=""><a href="javascript:void(0);" onclick="changePage(this)">${state.index}</a></li>
                            </c:forEach>
                            <li class=""><a href="javascript:void(0);" aria-label="Next" onclick="next(this)">»</a></li>
                        </ul>
                    </div>
                    <form action="${ctx }/topic/detail" method="post" id="gotoPageForm">
                        <input type="hidden" id="gotoPage" name="pageVal" >
                        <input type="hidden" id="topicId" name="topicId" value="${topic.id}" >
                    </form>
                    </c:if>
                </div>
            </div>


            <div class="panel panel-default">
                <div class="panel-heading">
                    	我要回复
                </div>

                <ul class="list-group">

                    <li class="list-group-item">
                    <c:if test="${empty user }">
                    	<div>只有登陆后才能回复哦!</div>
                    </c:if>
                    <c:if test="${not empty user }">
                    	<form action="${ctx }/reply/save" method="post" >
                    	<input type="hidden" name="topicId" value="${topic.id }">
						<textarea class="form-control" rows="3" placeholder="回复内容" name="replyContent"></textarea>
						<div class="help-block"></div>
						<button type="submit" class="btn btn-info btn-md center-block">提交</button>
						</form>
                    </c:if>
                    	
                    </li>
                </ul>
            </div>
        </div>
<script type="application/javascript">

    function changePage(ele){
        $(ele).parent().siblings("li").removeClass("active");
        $(ele).parent().addClass("active");
        $("#gotoPage").val($.trim($(ele).text()));
        $("#gotoPageForm").submit();
    }
    //上一页
    function previous(ele){
//获取当前页码
        var index = $("#pageList li.active").index();
//如果不是第一页
        if(index != 1 ){
//获取当前页面的上一个li元素,并触发changePage方法
            var domA = $("#pageList li.active").prev().children("a").get(0);
            changePage(domA)
        }
    }
    //下一页
    function next(ele){
        var index = $("#pageList li.active").index();
        var last = $("#pageList li:last").prev().text();
        if(index != parseInt(last)){
            var domA = $("#pageList li.active").next().children("a").get(0);
            changePage(domA)
        }
    }
    $(function(){
        var currentPage = ${requestScope.gotoPage};
        $("#pageList li").each(function(){
            if($(this).text()==currentPage){
                $(this).addClass("active");
                return false;
            }
        })
    })
</script>